CSS text-shadowã§ãèŠèŠçã«çŸããã¢ã¯ã»ã·ãã«ãªããã¹ããšãã§ã¯ããäœæãé«åºŠãªãã¯ããã¯ãã¯ãã¹ãã©ãŠã¶äºææ§ãã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã®ãã¹ããã©ã¯ãã£ã¹ãåŠã³ãŸãã
CSSããã¹ãã·ã£ããŠïŒã°ããŒãã«Webãã¶ã€ã³ã®ããã®é«åºŠãªããã¹ããšãã§ã¯ãããã¹ã¿ãŒãã
CSSã®text-shadowããããã£ã¯ããŠã§ããµã€ãã®ã¿ã€ãã°ã©ãã£ã«æ·±ã¿ã匷調ãèŠèŠçãªé
åãå ããããã®åŒ·åãªããŒã«ã§ããåçŽãªããããã·ã£ããŠãè¶
ããŠãtext-shadowã¯æŽç·Žãããé
åçãªããã¹ããšãã§ã¯ããäœæããããã®ããŸããŸãªå¯èœæ§ãæäŸããŸãããã®å
æ¬çãªã¬ã€ãã§ã¯ãã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã®ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããæ¹æ³ã§text-shadowãæŽ»çšããããã®é«åºŠãªãã¯ããã¯ãã¯ãã¹ãã©ãŠã¶äºææ§ãã¢ã¯ã»ã·ããªãã£ã®èæ
®äºé
ãããã³ãã¹ããã©ã¯ãã£ã¹ãæ¢ããŸãã
text-shadowã®åºæ¬ãçè§£ãã
é«åºŠãªãã¯ããã¯ã«é²ãåã«ãtext-shadowããããã£ã®åºæ¬çãªæ§æã確èªããŸãããïŒ
text-shadow: h-shadow v-shadow blur-radius color;
h-shadowïŒã·ã£ããŠã®æ°Žå¹³ãªãã»ããïŒæ£ã®å€ã¯ã·ã£ããŠãå³ã«ãè² ã®å€ã¯å·Šã«ç§»åïŒãv-shadowïŒã·ã£ããŠã®åçŽãªãã»ããïŒæ£ã®å€ã¯ã·ã£ããŠãäžã«ãè² ã®å€ã¯äžã«ç§»åïŒãblur-radiusïŒã·ã£ããŠã®ãªãã·ã§ã³ã®ãŒããååŸãå€ã倧ããã»ã©ããããŒãããã·ã£ããŠãäœæãããŸãã0ã«èšå®ãããšãã·ã£ããŠã¯ã·ã£ãŒãã«ãªããŸããcolorïŒã·ã£ããŠã®è²ã
åã·ã£ããŠå®çŸ©ãã«ã³ãã§åºåãããšã«ãããåãããã¹ãã«è€æ°ã®ã·ã£ããŠãé©çšã§ããŸããããã«ãããåµé çãªå¯èœæ§ã倧ããåºãããŸãã
åºæ¬çãªäŸïŒ
äŸ1ïŒã·ã³ãã«ãªããããã·ã£ããŠ
text-shadow: 2px 2px 4px #000000;
ããã«ãããæ°Žå¹³ããã³åçŽã«2ãã¯ã»ã«ãªãã»ããããã4ãã¯ã»ã«ã®ãŒããååŸãæã€é»ãã·ã£ããŠãäœæãããŸãã
äŸ2ïŒç¹çްãªããã¹ãã°ããŒ
text-shadow: 0 0 5px #FFFFFF;
ããã«ããããªãã»ãããªãã§ããã¹ãã®åšãã«çœãã°ããŒãäœæãããŸãã
é«åºŠãªããã¹ãã·ã£ããŠãã¯ããã¯
ã§ã¯ãéåžžã®ããã¹ããšãã§ã¯ããè¶ ãããããæŽç·Žããããã¯ããã¯ãæ¢ã£ãŠã¿ãŸãããã
1. æ·±ã¿ãšç«äœæã®ããã®è€æ°ã·ã£ããŠ
ãããã«ç°ãªããªãã»ããããŒããååŸãè²ãæã€è€æ°ã®ã·ã£ããŠãéããããšã§ãé åçãªæ·±ã¿ãšç«äœæãçã¿åºãããšãã§ããŸãããã®ãã¯ããã¯ã¯ã3Dããã¹ããšãã§ã¯ããäœæããã®ã«ç¹ã«åœ¹ç«ã¡ãŸãã
äŸïŒ3Dããã¹ããšãã§ã¯ãã®äœæ
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
ãã®äŸã§ã¯ãç¹çްãªé»ãã·ã£ããŠãšéãã°ããŒãçµã¿åãããŠ3D广ãã·ãã¥ã¬ãŒãããŸããããŸããŸãªè²ã®çµã¿åããããªãã»ããã詊ããŠãæãŸããå€èгãå®çŸããŠãã ããã
2. ã€ã³ããŒã·ã£ããŠïŒãšã³ãã¹å å·¥ããã¹ãã®ã·ãã¥ã¬ãŒãïŒ
CSSã«ã¯ããã¹ãçšã®çŽæ¥çãª`inner-shadow`ããããã£ã¯ãããŸããããæŠç¥çãªãªãã»ãããšè²ãæã€è€æ°ã®ã·ã£ããŠã䜿çšããŠåæ§ã®å¹æãå®çŸã§ããŸãããã®ãã¯ããã¯ã¯ãããã¹ããèæ¯ã«çªªãã§ãããããŸãã¯ãšã³ãã¹å å·¥ãããŠããããã«èŠãããå Žåã«æé©ã§ãã
äŸïŒãšã³ãã¹å å·¥ããã¹ããšãã§ã¯ã
text-shadow: 1px 1px 2px white, -1px -1px 2px black;
éèŠãªã®ã¯ãããã¹ãã®å察åŽã«æããã·ã£ããŠãšæãã·ã£ããŠã䜿çšããããšã§ããæããã·ã£ããŠã¯çãäžãã£ãéšåã«åœããå ãã·ãã¥ã¬ãŒãããæãã·ã£ããŠã¯çªªãã éšåãã·ãã¥ã¬ãŒãããŸãã
3. ããªã³ããã¹ããšãã§ã¯ã
ããªã³ããã¹ããšãã§ã¯ããäœæããã«ã¯ãããŸããŸãªãŒããååŸãæã€è€æ°ã®æããè²ã®ã·ã£ããŠã䜿çšããŸããéèŠãªã®ã¯ããããã®ã·ã£ããŠãéããŠãããã¹ãã®åšãã«é®®ããã§å ããªãŒã©ãäœãåºãããšã§ãã
äŸïŒããªã³ããã¹ã
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e60073, 0 0 20px #e60073, 0 0 25px #e60073, 0 0 30px #e60073, 0 0 35px #e60073;
è²ãšãŒããååŸã調æŽããŠã奜ã¿ã«åãããŠããªã³å¹æãã«ã¹ã¿ãã€ãºããŸããã¿ãŒã²ãããªãŒãã£ãšã³ã¹ã«æåçã«é¢é£ã®ããè²ãããã©ã³ãã®ã¢ã€ãã³ãã£ãã£ã«æ²¿ã£ãè²ã䜿çšããããšãæ€èšããŠãã ãããäŸãã°ãããªã³ãµã€ã³ã¯å€ãã®ã¢ãžã¢è«žåœã§æ®åããŠããããããã®ãµã€ã³ã«äžè¬çã«é¢é£ä»ããããè²ã䜿çšãããšããã®å°åã®ãŠãŒã¶ãŒã«èŠªè¿æãæ±ããããããããŸããã
4. ãã³ã°ã·ã£ããŠãšãã§ã¯ã
ãã³ã°ã·ã£ããŠãšãã§ã¯ãã¯ãããã¹ããã䌞ã³ããã©ãããã¯ã§çްé·ãã·ã£ããŠãäœæããŸãããã®å¹æã¯ãããããªã¹ããã¶ã€ã³ã§æ·±ã¿ãšèŠèŠçãªé¢çœããå ããããã«ãã䜿çšãããŸãã
äŸïŒãã³ã°ã·ã£ããŠ
text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
説åŸåã®ãããã³ã°ã·ã£ããŠãäœæããéµã¯ãæ¯èŒçå°ããªãŒããååŸãšå€§ããªãªãã»ããã䜿çšããããšã§ããæ°Žå¹³ããã³åçŽã®ãªãã»ããå€ã倿Žããããšã§ãã·ã£ããŠã®é·ããšè§åºŠã調æŽã§ããŸãã
5. ããã¹ãã·ã£ããŠã¢ãã¡ãŒã·ã§ã³
text-shadowããããã£ãã¢ãã¡ãŒã·ã§ã³åããããšã§ããã€ãããã¯ã§äººç®ãåŒãããã¹ããšãã§ã¯ããäœæã§ããŸããããã¯CSSããŒãã¬ãŒã ãJavaScriptã䜿çšããŠå®çŸã§ããŸããã¢ãã¡ãŒã·ã§ã³åãããããã¹ãã·ã£ããŠã¯ãéèŠãªæ
å ±ã«æ³šæãåŒãããããŠã§ããµã€ãã«ã€ã³ã¿ã©ã¯ãã£ããªã¿ãããå ãããããããã«äœ¿çšã§ããŸãã
äŸïŒèåããããã¹ãã·ã£ããŠïŒCSSããŒãã¬ãŒã ïŒ
@keyframes pulsate {
0% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e60073, 0 0 20px #e60073, 0 0 25px #e60073; }
50% { text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #e60073, 0 0 8px #e60073, 0 0 10px #e60073; }
100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e60073, 0 0 20px #e60073, 0 0 25px #e60073; }
}
.pulsating-text {
animation: pulsate 2s infinite;
}
ãã®äŸã§ã¯ãããã¹ãã·ã£ããŠã®ãŒããååŸãã¢ãã¡ãŒã·ã§ã³åããããšã§ãèåããããªã³å¹æãäœæããŸããã¢ãã¡ãŒã·ã§ã³ã¯æ§ããã«äœ¿çšãããŠãŒã¶ãŒã®æ³šæãæ£æŒ«ã«ãããããŠã§ããµã€ãã®ããã©ãŒãã³ã¹ã«æªåœ±é¿ãäžãããããªãããã«ããŠãã ããã
ã¯ãã¹ãã©ãŠã¶äºææ§
text-shadowããããã£ã¯åªããã¯ãã¹ãã©ãŠã¶äºææ§ãæã¡ãChromeãFirefoxãSafariãEdgeãOperaãªã©ã®ãã¹ãŠã®äž»èŠãªãã©ãŠã¶ãšãã®ã¢ãã€ã«çã§ãµããŒããããŠããŸãããã ããããã¹ãã·ã£ããŠå¹æãæåŸ
ã©ããã«ã¬ã³ããªã³ã°ãããããšã確èªããããã«ãããŸããŸãªãã©ãŠã¶ãããã€ã¹ã§ãã¹ãããããšã¯åžžã«è¯ãç¿æ
£ã§ãããã©ãŠã¶ã®éçºè
ããŒã«ã䜿çšããŠãã¬ã³ããªã³ã°ãããCSSãæ€æ»ããäºææ§ã®åé¡ããã©ãã«ã·ã¥ãŒãã£ã³ã°ããããšãæ€èšããŠãã ããã
ã¢ã¯ã»ã·ããªãã£ã«é¢ããèæ ®äºé
text-shadowã¯ãŠã§ããµã€ãã®èŠèŠçãªé
åãé«ããããšãã§ããŸãããã¢ã¯ã»ã·ããªãã£ãžã®åœ±é¿ãèæ
®ããããšãéèŠã§ããããã¹ãã·ã£ããŠã䜿ãããããšãç¹ã«èŠèŠé害ã®ãããŠãŒã¶ãŒã«ãšã£ãŠããã¹ããèªã¿ã«ãããªãå¯èœæ§ããããŸããçæãã¹ãã¢ã¯ã»ã·ããªãã£ã¬ã€ãã©ã€ã³ãããã€ã玹ä»ããŸãïŒ
- ã³ã³ãã©ã¹ãæ¯ïŒããã¹ããšãã®ã·ã£ããŠãèæ¯ã«å¯ŸããŠååãªã³ã³ãã©ã¹ããæã€ããã«ããŠãã ãããWebAIMã®Contrast Checkerãªã©ã®ããŒã«ã䜿çšããŠãè²ã®çµã¿åãããã¢ã¯ã»ã·ããªãã£åºæºãæºãããŠããããšã確èªããŸããããã¯ç¹ã«ãããŒããžã§ã³ãè²èŠç°åžžã®ãŠãŒã¶ãŒã«ãšã£ãŠéèŠã§ãã
- å¯èªæ§ïŒé床ãªãŒããååŸãè€éãªã·ã£ããŠãã¿ãŒã³ã䜿çšãããšãããã¹ãããŒããããæªãã ãããŠèŠããå¯èœæ§ãããããé¿ããŠãã ãããäœãããå¯èªæ§ãšå€èªæ§ãåªå ããŸããæåçèæ¯ãèæ ®ããŠãã ãããäŸãã°ãè€éãªæåãæã€èšèªã§ã¯ãæåã®åœ¢ãäžæçã«ããªãããã«ãããã¹ãã·ã£ããŠãããæ éã«æ€èšããå¿ èŠããããããããŸããã
- ãŠãŒã¶ãŒèšå®ïŒããã¹ãã·ã£ããŠãéªéã«ãªã£ããèªã¿ã«ãããšæãããŠãŒã¶ãŒã®ããã«ãç¡å¹åãŸãã¯ã«ã¹ã¿ãã€ãºããæ©èœãæäŸããŸããããã¯ãCSSã¡ãã£ã¢ã¯ãšãªãJavaScriptããŒã¹ã®ãŠãŒã¶ãŒèšå®ã«ãã£ãŠå®çŸã§ããŸãã
- 代æ¿ããã¹ãïŒç»åã®äžéšã§ããããã¹ãïŒäŸïŒããŽïŒã«ã€ããŠã¯ããã®ç»åã«ããã¹ããã·ã£ããŠå¹æãå«ãç»åã®å 容ã説æããé©åãªä»£æ¿ããã¹ããããããšã確èªããŠãã ããã
ã°ããŒãã«Webãã¶ã€ã³ã§text-shadowã䜿çšããããã®ãã¹ããã©ã¯ãã£ã¹
ã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã®Webãã¶ã€ã³ã§text-shadowã䜿çšããéã¯ã以äžã®ãã¹ããã©ã¯ãã£ã¹ãèæ
®ããŠãã ããïŒ
- æåçé æ ®ïŒè²ãèŠèŠã¹ã¿ã€ã«ã«é¢ããæåçãªé£æ³ã«æ³šæããŠãã ãããããæåã§è¯å®çãšèŠãªãããè²ããå¥ã®æåã§ã¯åŠå®çã«èªèãããããšããããŸããæåçãªå¥œã¿ã調æ»ããããã«å¿ããŠãã¶ã€ã³ã調æŽããŸããäŸãã°ãäžåœæåã§ã¯èµ€ã¯å¹žéãšç¹æ ã象城ããŸãããè¥¿æŽæåã§ã¯å±éºãèŠåã衚ãããšããããŸãã
- èšèªã«é¢ããèæ ®äºé ïŒè¡šç€ºãããèšèªã«å¿ããŠãããã¹ãã®ãµã€ãºããã©ã³ããééã調æŽããå¿ èŠãããå ŽåããããŸããããã¹ãã·ã£ããŠã¯ãç°ãªãæåã»ããã®å€èªæ§ã«åœ±é¿ãäžããå¯èœæ§ããããŸããæé©ãªå¯èªæ§ã確ä¿ããããã«ãããŸããŸãªèšèªã§ãã¶ã€ã³ããã¹ãããŠãã ãããå¹ åºãèšèªããµããŒãããããã«ãUnicodeæåãšé©åãªãã©ã³ããã¡ããªãŒã®äœ¿çšãæ€èšããŸãã
- ããã€ã¹ã®æé©åïŒããã¹ãã·ã£ããŠã¯ãç¹ã«ã¢ãã€ã«ããã€ã¹ã§ã¯èšç®ã³ã¹ããé«ããªãå¯èœæ§ããããŸããããã©ãŒãã³ã¹ãžã®åœ±é¿ãæå°éã«æããããã«ã·ã£ããŠå¹æãæé©åããŸããCSSã¡ãã£ã¢ã¯ãšãªã䜿çšããŠãå°ããªç»é¢ãåŠçèœåã®éãããããã€ã¹ã§ã¯ããã¹ãã·ã£ããŠã調æŽãŸãã¯ç¡å¹ã«ããŸãã
- ããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ãïŒ
text-shadowãããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ããšããŠäœ¿çšããŸãããŠãŒã¶ãŒã®ãã©ãŠã¶ãtext-shadowããµããŒãããŠããªãå Žåã§ãããŠã§ããµã€ããæ©èœããã¢ã¯ã»ã¹å¯èœã§ããããšã確èªããŸããããã¯ãã·ã£ããŠã®ãªãããã¹ãã«ãã©ãŒã«ããã¯ã¹ã¿ã€ã«ãæäŸããããšã§å®çŸã§ããŸãã - ãã¹ããšæ€èšŒïŒããŸããŸãªãã©ãŠã¶ãããã€ã¹ããªãã¬ãŒãã£ã³ã°ã·ã¹ãã ã§ãã¶ã€ã³ã培åºçã«ãã¹ãããŸãããªã³ã©ã€ã³æ€èšŒããŒã«ã䜿çšããŠãCSSã³ãŒããæå¹ã§ãšã©ãŒããªãããšã確èªããŸãã
ç°ãªãæåçæèã§ã®äŸ
text-shadowãç°ãªãæåçæèã§ã©ã®ããã«å¹æçã«äœ¿çšã§ããããããã€ãã®äŸãèããŠã¿ãŸãããïŒ
- æ±ã¢ãžã¢ïŒæ¥æ¬ãäžåœãéåœïŒïŒç¹çްãªããã¹ãã·ã£ããŠãæã€ããããªã¹ããã¶ã€ã³ã奜ãŸããããšãå€ãã§ããèœã¡çããè²ã幟äœåŠçãªåœ¢ã䜿çšããŠãã¯ãªãŒã³ã§æŽç·Žãããå€èгãäœæããããšãæ€èšããŠãã ãããäŸãã°ãæ¥æ¬ã®ã¿ã€ãã°ã©ãã£ã¯ããã°ãã°ã·ã³ãã«ããšåªé ãã匷調ããŸãã
- ã©ãã³ã¢ã¡ãªã«ïŒå€§èãªè²ãšé®®ãããªããã¹ãã·ã£ããŠã䜿çšããŠã掻æ°ã«æºã¡ããšãã«ã®ãã·ã¥ãªé°å²æ°ãäœãåºãããšãã§ããŸãããã¹ã¿ãŒã販ä¿è³æã§äœ¿çšãããããã¹ãã«æ·±ã¿ãšç«äœæãå ããããã«ãããã¹ãã·ã£ããŠã䜿çšããããšãæ€èšããŠãã ããã
- äžæ±ïŒè€éãªæš¡æ§ãã«ãªã°ã©ãã£ãWebãã¶ã€ã³ã§ãã䜿çšãããŸããããã¹ãã·ã£ããŠã¯ãã¢ã©ãã¢èªã®ã«ãªã°ã©ãã£ã®çŸãããé«ããæ·±ã¿ãšè³ªæãçã¿åºãããã«äœ¿çšã§ããŸããè²ãç»åãéžã¶éã«ã¯ã宿çããã³æåçãªæåæ§ã«æ³šæããŠãã ããã
- ãšãŒãããïŒã¢ãã³ãªçŸåŠãšã¯ã©ã·ãã¯ãªã¿ã€ãã°ã©ãã£ãçµã¿åãããããã©ã³ã¹ã®åããã¢ãããŒãããã°ãã°è©äŸ¡ãããŸããç¹çްãªããã¹ãã·ã£ããŠã¯ãéåºŠã«æ°ãæ£ããããšãªãå¯èªæ§ãåäžãããããšãã§ããŸãã
çµè«
CSSã®text-shadowã¯ããŠã§ããµã€ãã®èŠèŠçãªé
åã倧å¹
ã«åäžãããããšãã§ããæ±çšæ§ã®é«ãããããã£ã§ããé«åºŠãªãã¯ããã¯ããã¹ã¿ãŒããã¯ãã¹ãã©ãŠã¶äºææ§ãèæ
®ããã¢ã¯ã»ã·ããªãã£ãåªå
ããããšã§ãäžçäžã®ãŠãŒã¶ãŒãé
äºãåã°ããçŽ æŽãããããã¹ããšãã§ã¯ããäœæã§ããŸããåžžã«ãã¶ã€ã³ã培åºçã«ãã¹ãããã¿ãŒã²ãããªãŒãã£ãšã³ã¹ã®æåçèæ¯ããŠãŒã¶ãŒã®å¥œã¿ã«åãããŠã¢ãããŒãã調æŽããããšãå¿ããªãã§ãã ããããããã®ã¬ã€ãã©ã€ã³ã«åŸãããšã§ãtext-shadowã®åãæŽ»çšããŠãçã«ã°ããŒãã«ã§å
æ¬çãªWebãšã¯ã¹ããªãšã³ã¹ãåµé ããããšãã§ããŸãã
åèè³æïŒ
- MDN Web Docs: text-shadow
- CSS Tricks: text-shadow
- WebAIM: Contrast Checker